<template>
  <div>
    <el-card>
      <div class="monitor-list">
        <!-- 左边按钮 -->
        <div class="btn" @click="scrollLeft">
          <i class="el-icon el-icon-caret-left" />
        </div>
        <!-- 中间列表 -->
        <div id="list-box" class="list-box">
          <div id="list" class="list">
            <div v-for="item in monitorList" :key="item.appId" class="list-item" @click="goServe(item)">
              <!-- <img v-if="item.status" width="60" height="60" :src="imgList.alive" alt="">
              <img v-else width="60" height="60" :src="imgList.down" alt=""> -->
              <appIcon :icon-type="item.iconType" :app-icon="item.appIcon" :active-color="item.iconColor" style="margin:0 auto" />
              <p class="menutitle" >{{ item.appName }}</p>
            </div>
          </div>
        </div>
        <!-- 右边按钮 -->
        <div class="btn" @click="scrollRight">
          <i class="el-icon el-icon-caret-right" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserEnableListWorkbench } from "@/api/system/app";
import router from '@/router'
import appIcon from '@/views/system/appType/components/appIcon.vue'
export default {
  components: { appIcon },
  data() {
    return {
      monitorList: [],
      imgList: {
        alive: require('@/assets/images/dbgz.png'),
        down: require('@/assets/images/dbgz.png')
      }
    }
  },
  created() {
    this.getServesMenuList()
  },
  methods: {
    initMonitorList() {
      for (let i = 1; i < 21; i++) {
        this.monitorList.push({
          id: i,
          name: `item${i + 1}`,
          status: 0
        })
      }
    },
    getServesMenuList() {
      getUserEnableListWorkbench().then(response => {
        this.monitorList = response.data;
      });
    },
    async goServe(item) {
      if (item.appSource == 1) {
        localStorage.setItem('INTELLIGENT_PLANTFORM_SYSTEM_APP_CODE', item.appCode) // 跳转新页签传值
        var path = "/index"
        window.open(path, '_blank')
      } else {
        // appsource是2的代表需要根据应用地址往外跳
        window.open(item.appAddress, '_blank')
      }
      this.visible = false
    },
		// 左滑动逻辑
    scrollLeft() {
      const allLength = this.monitorList.length * 120
      const boxLength = document.getElementById('list-box').clientWidth
      if (allLength < boxLength) return
      const listEl = document.getElementById('list')
      const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
      if (leftMove + boxLength - 360 < boxLength) {
        // 到最开始的时候
        listEl.style.left = '0px'
      } else {
        listEl.style.left = '-' + (leftMove - 360) + 'px'
      }
    },
		// 右滑动逻辑
    scrollRight() {
      const allLength = this.monitorList.length * 120
      const boxLength = document.getElementById('list-box').clientWidth
      if (allLength < boxLength) return
      const listEl = document.getElementById('list')
      const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
      if (leftMove + boxLength + 360 > allLength) {
        listEl.style.left = '-' + (allLength - boxLength) + 'px'
      } else {
        listEl.style.left = '-' + (leftMove + 360) + 'px'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .monitor-list {
    display: flex;
    justify-content: space-between;
    height: 95px;

    .btn {
      border: 0px solid #b3d8ff;
      width: 40px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      cursor: pointer;
      background-color: white;
      // icon
      font-size: 24px;
      color: #b3d8ff;

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
      }
    }
    .list-box {
      width: calc(100vw - 100px);
      overflow: hidden;

      .list {
        width: calc(100vw - 100px);
        display: flex;
        transform: all 2s;
        .list-item {
          width: 100px;
          height: 95px;
          text-align: center;
          padding: 10px;
          cursor: pointer;
          margin-left: 40px;
          .menutitle{
            color: #606266;
          }
        }
        .list-item:hover{
          //  background: #F2F4F7;
          opacity:0.6;
        }
        position: relative;
        left: 0;
        transition: left 1s;
      }
    }
  }
</style>
